<template>
  <div class="previewImage" @click="hideImage">
    <swiper class="previewImageSwiper" :options="swiperOption" ref="mySwiper">
      <swiper-slide  v-for="(item,index) in previewImageUrls" :key="index" class="previewImageSwiperSlide">
        <img v-lazy="item" />
      </swiper-slide>
    </swiper>
  </div>
</template>
<script>


//预览图片
import { swiper, swiperSlide } from "vue-awesome-swiper"
import {mapActions,mapGetters} from "vuex";
export default {
  name: "PreviewImage",
  data() {
    return {
      
    };
  },
  computed: {
    ...mapGetters(["previewImageUrls","previewImageIndex"]),
    swiperOption() {
        //这个地方暂时不需要配置，可以给空值
    },
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  //created与mounted是同一个意思
  mounted(){
      this.swiper.slideTo(this.previewImageIndex,0,false);
  },
  components: {
    swiper,
    swiperSlide
  },
  methods:{
      ...mapActions(["hidePreviewImage"]),
      hideImage(){
          console.log("hide");
          this.hidePreviewImage()
      }
  }
};
</script>
<style lang="scss" scoped>
.previewImage {
  position: fixed;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  background-color: black;
  .previewImageSwiper {
    width: 100%;
    height: 100%;
    .previewImageSwiperSlide {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      img {
        width: 100%;
        height: auto;
        max-height: 100%;
      }
    }
  }
  z-index:9999;
}
</style>